<template>
    <div class="text-block">
        <div class="title">
            <text v-if="required" class="required">*</text>
            {{title}}
        </div>
        <div v-if="upload" class="upload-file" @click="uploadImage">
            <div class="default" v-if="!imageUrl">
                <uni-icons type="plusempty" size="20" color="#C5C8CD"></uni-icons>
                <text class="text">图片上传</text>
            </div>
            <div class="image-warp" v-else>
                <image  class="image" :src="imageUrl" alt="" @click.stop="preview"></image>
                <span class="close" @click.stop="imageUrl = ''">
                    <image src="@/static/ic_pic_close@2x.png" alt=""></image>
                </span>
            </div>
        </div>
        <div class="textarea-box" :style="{height: `${height * 100 / 750 / 4}rem`}">
            <textarea 
                class="textarea"  
                :value="keyword"
                :maxlength="maxLength"
                :placeholder="placeholder"
                placeholder-class="placeholder"
                cursor-color="#999"
                :cursor-spacing="100"
                :cursor="keyword.length"
                @input="handleInput"
                
            />
            <text class="count">{{count}}/{{maxLength}}</text>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            value: { // 绑定输入框值
                type: String,
                default: ''
            },
            title: { // 页面展示标题
                type: String,
                default: ''
            },
            required: {
                type: Boolean,
                default: false
            },
            placeholder: {
                type: String,
                default: '请输入'
            },
            height: { // 输入框高
                type: String | Number,
                default: 200
            },
            upload: { // 是否有上传图片
                type: Boolean,
                default: false
            },
            maxLength: { // 输入框限制
                type: Number,
                default: 10000
            },
            uploadUrl: { // 绑定的图片地址
                type: String,
                default: ''
            },

        },
        data() {
            return {
                count: 0,
                imageUrl: '',
                keyword: ''
            }
        },
        watch: {
            imageUrl(val){
                this.$emit('update:uploadUrl', val)
            }
        },
        methods: {
            preview(){
                wx.previewImage({
                    current: this.imageUrl, // 当前显示图片的http链接
                    urls: [this.imageUrl] // 需要预览的图片http链接列表
                })
            },
            handleInput(e){
                let {value = ''} = e.target
                value =value.substr(0, this.maxLength)
                this.count = value.length
                this.$emit('input', value.trim())
            },
            uploadImage(){
                let url = ''
                if(process.env.NODE_ENV == 'development'){
                    url = "https://bjielts-t.test.xdf.cn/test-api/ieltsRecallPublish/saveImage"
                } else {
                    url = "https://bjielts.xdf.cn/prod-api/ieltsRecallPublish/saveImage"
                }
                let Authorization = uni.getStorageSync('Access-Token');
                const that = this
                uni.chooseImage({
                    sizeType: ['compressed'],
                    success: (chooseImageRes) => {
                        const tempFilePaths = chooseImageRes.tempFilePaths;
                        wx.uploadFile({
                            url: url,
                            filePath: tempFilePaths[0],
                            name: 'file',
                            formData: {
                                'user': 'test'
                            },
                            header: {
                                u2at: Authorization
                            },
                            complete(uploadFileRes){
                                console.log('上传完成')
                                const res = JSON.parse(uploadFileRes.data)
                                if(res.code == 200){
                                    that.imageUrl = res.data
                                }else {
                                    that.$tip.toast(res.msg)
                                }
                            }
                        })
                    }
                });
            }
        },
    }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
    @function toRem($rpx){  //$rpx为需要转换的字号
        @return #{$rpx * 100 / 750 / 4}rem; 
    }
    .text-block{
        margin-top: toRem(40);
    }
    .title{
        color: #333;
        font-size: toRem(28);
        margin-bottom: toRem(24);
        .required{
            color: #FD453D;
            margin-right: toRem(8);
        }
    }
    .textarea-box{
        width: 100%;
        border-radius: toRem(10);
        background-color: #F6F8FC;
        font-size: toRem(28);
        padding: toRem(20) toRem(20) toRem(55);
        box-sizing: border-box;
        position: relative;
        overflow: auto;
        .textarea{
            width: 100%;
            height: 100%;
        }
        .placeholder{
            color: #999;
        }
        .count{
            position: absolute;
            bottom: toRem(19);
            right: toRem(20);
            color: #999;
            font-size: toRem(24);
        }
    }
    .upload-file{
        width: toRem(114);
        height: toRem(114);
        border-radius: toRem(4);
        margin-bottom: toRem(20);
        position: relative;
        .default{
            background-color: #F6F8FC;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #C5C8CD;
            width: 100%;
            height: 100%;
            .text{
                font-size: toRem(24);
            }
        }
        .image-warp{
            position: relative;
            width: 100%;
            height: 100%;
        }
        .image{
            width: 100%;
            height: 100%;
        }
        .close{
            position: absolute;
            right: 0;
            top: 0;
            z-index: 10;
            width: toRem(28);
            height: toRem(28);
            padding: toRem(6);
            transform: translate(50%,-50%);
            image{
                width: 100%;
                height: 100%;
            }
        }
    }
 
</style>
